<template>
  <div id="app">
    <nav v-if="shouldShowNav" class="navbar">
      <div class="nav-brand" @click="goToHome">
        <h2 @click="goToHome">烈焰之雨的Blog</h2>
      </div>
      
      <!-- 桌面端导航 -->
      <div class="nav-links desktop-nav">
        <router-link to="/" class="nav-link">首页</router-link>
        
        <!-- 分类下拉菜单 -->
        <div class="nav-dropdown" @mouseenter="showCategoryMenu = true" @mouseleave="showCategoryMenu = false">
          <span class="nav-link" :class="{ active: isCategoryActive }">
            分类
            <i class="fa fa-caret-down"></i>
          </span>
          <div class="dropdown-menu" :class="{ show: showCategoryMenu }">
            <router-link 
              v-for="category in categories" 
              :key="category.dictCode"
              :to="`/category/${category.dictValue}`" 
              class="dropdown-item"
            >
              <i :class="getCategoryIcon(category.dictValue)"></i> {{ category.dictLabel }}
            </router-link>
          </div>
        </div>
        
        <div class="nav-dropdown" @mouseenter="showFunMenu = true" @mouseleave="showFunMenu = false">
          <span class="nav-link" :class="{ active: isFunActive }">
            趣味
            <i class="fa fa-caret-down"></i>
          </span>
          <div class="dropdown-menu" :class="{ show: showFunMenu }">
            <router-link to="/fun/game2048" class="dropdown-item">
              <i class="fa fa-gamepad"></i> 2048游戏
            </router-link>
            <router-link to="/fun/qrcode" class="dropdown-item">
              <i class="fa fa-qrcode"></i> 二维码生成器
            </router-link>
          </div>
        </div>
        <router-link to="/about" class="nav-link">关于</router-link>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <el-button class="mobile-menu-btn" @click="showMobileMenu = true" type="primary" plain circle>
        <i class="fa fa-bars"></i>
      </el-button>
    </nav>
    
    <!-- 移动端抽屉菜单 -->
    <el-drawer
      v-model="showMobileMenu"
      direction="rtl"
      size="280px"
      class="mobile-drawer"
    >
  
      
      <div class="custom-mobile-menu">
        <router-link to="/" class="menu-item" @click="showMobileMenu = false">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </router-link>
        
        <div class="menu-group">
          <div class="menu-item" @click="toggleCategoryMenu">
            <i class="fa fa-folder"></i>
            <span>分类</span>
            <i class="fa fa-chevron-down arrow" :class="{ open: showCategorySubMenu }"></i>
          </div>
          <div class="sub-menu" v-show="showCategorySubMenu">
            <router-link 
              v-for="category in categories" 
              :key="category.dictCode"
              :to="`/category/${category.dictValue}`"
              class="sub-menu-item"
              @click="showMobileMenu = false"
            >
              <i :class="getCategoryIcon(category.dictValue)"></i>
              <span>{{ category.dictLabel }}</span>
            </router-link>
          </div>
        </div>
        
        <div class="menu-group">
          <div class="menu-item" @click="toggleFunMenu">
            <i class="fa fa-gamepad"></i>
            <span>趣味</span>
            <i class="fa fa-chevron-down arrow" :class="{ open: showFunSubMenu }"></i>
          </div>
          <div class="sub-menu" v-show="showFunSubMenu">
            <router-link to="/fun/game2048" class="sub-menu-item" @click="showMobileMenu = false">
              <i class="fa fa-gamepad"></i>
              <span>2048游戏</span>
            </router-link>
            <router-link to="/fun/qrcode" class="sub-menu-item" @click="showMobileMenu = false">
              <i class="fa fa-qrcode"></i>
              <span>二维码生成器</span>
            </router-link>
          </div>
        </div>
        
        <router-link to="/about" class="menu-item" @click="showMobileMenu = false">
          <i class="fa fa-info-circle"></i>
          <span>关于</span>
        </router-link>
      </div>
    </el-drawer>
    
    <main :class="['main-content', { 'admin-mode': isAdminRoute }]">
      <router-view />
    </main>
    
    <!-- 页脚 - 只在非管理界面显示 -->
    <footer v-if="shouldShowFooter" class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h4>烈焰之雨的Blog</h4>
          <p>分享技术，记录生活，探索AI世界的无限可能</p>
          <div class="social-links">
            <a href="#" class="social-link"><i class="fas fa-envelope"></i></a>
            <a href="#" class="social-link"><i class="fab fa-github"></i></a>
            <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
          </div>
        </div>
        
        <div class="footer-section">
          <h4>快速链接</h4>
          <ul class="footer-links">
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/about">关于</router-link></li>
            <li><a href="#" @click="goToAdmin">管理后台</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>技术栈</h4>
          <ul class="footer-links">
            <li><a href="#">Spring Boot</a></li>
            <li><a href="#">Vue.js</a></li>
            <li><a href="#">MyBatis Plus</a></li>
            <li><a href="#">SQLite</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>联系信息</h4>
          <div class="contact-info">
            <p><i class="fas fa-envelope"></i> dddpeter@example.com</p>
            <p><i class="fas fa-globe"></i> www.dddpeter.com</p>
            <p><i class="fas fa-map-marker-alt"></i> 中国·北京</p>
            <p><i class="fas fa-clock"></i> 工作时间：9:00 - 18:00</p>
          </div>
        </div>
      </div>
      
      <div class="footer-bottom">
        <div class="footer-bottom-content">
          <p>&copy; 2024 烈焰之雨的Blog. 保留所有权利.</p>
          <div class="footer-bottom-links">
            <a href="#">隐私政策</a>
            <a href="#">服务条款</a>
            <a href="#">Cookie政策</a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { dictAPI } from '@/api/dict'
import { Menu, HomeFilled, Collection, Ticket, MagicStick, Grid, Picture, InfoFilled } from '@element-plus/icons-vue'
// 动态导入particles.js

export default {
  name: 'App',
  components: {
    Menu,
    HomeFilled,
    Collection,
    Ticket,
    MagicStick,
    Grid,
    Picture,
    InfoFilled
  },
  data() {
    return {
      showFunMenu: false,
      showCategoryMenu: false,
      showMobileMenu: false,
      showCategorySubMenu: false,
      showFunSubMenu: false,
      categories: []
    }
  },
  computed: {
    isFunActive() {
      return this.$route.path.startsWith('/fun')
    },
    isCategoryActive() {
      return this.$route.path.startsWith('/category')
    },
    isAdminRoute() {
      return this.$route.path.startsWith('/admin')
    },
    isPreviewRoute() {
      return this.$route.path.startsWith('/preview')
    },
    shouldShowNav() {
      return !this.isAdminRoute && !this.isPreviewRoute
    },
    shouldShowFooter() {
      return !this.isAdminRoute && !this.isPreviewRoute
    }
  },
  mounted() {
    this.loadCategories()
    this.initParticles()
    
    // 监听路由变化
    this.$watch('$route', (to, from) => {
      if (from && from.path !== to.path) {
        this.handleRouteChange(to, from)
      }
    })
  },
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    goToAdmin() {
      this.$router.push('/admin')
    },
    async loadCategories() {
      try {
        const response = await dictAPI.getArticleCategories()
        if (response.data.success) {
          this.categories = response.data.data
        }
      } catch (error) {
        console.error('加载分类失败:', error)
      }
    },
    toggleCategoryMenu() {
      this.showCategorySubMenu = !this.showCategorySubMenu
    },
    toggleFunMenu() {
      this.showFunSubMenu = !this.showFunSubMenu
    },
    
    getCategoryIcon(categoryValue) {
      // 根据分类值返回合适的图标
      const iconMap = {
        'tech': 'fa fa-code',
        'technology': 'fa fa-laptop',
        'programming': 'fa fa-code',
        'web': 'fa fa-globe',
        'frontend': 'fa fa-desktop',
        'backend': 'fa fa-server',
        'database': 'fa fa-database',
        'mobile': 'fa fa-mobile',
        'ai': 'fa fa-magic',
        'artificial': 'fa fa-magic',
        'machine': 'fa fa-magic',
        'learning': 'fa fa-graduation-cap',
        'algorithm': 'fa fa-puzzle-piece',
        'data': 'fa fa-bar-chart',
        'security': 'fa fa-shield',
        'cloud': 'fa fa-cloud',
        'cloud-computing': 'fa fa-cloud',
        'computing': 'fa fa-cloud',
        'architecture': 'fa fa-building',
        'architect': 'fa fa-building',
        'system': 'fa fa-sitemap',
        'microservice': 'fa fa-cubes',
        'container': 'fa fa-cube',
        'docker': 'fa fa-cube',
        'kubernetes': 'fa fa-cubes',
        'devops': 'fa fa-cogs',
        'deploy': 'fa fa-rocket',
        'cicd': 'fa fa-refresh',
        'monitoring': 'fa fa-line-chart',
        'tools': 'fa fa-wrench',
        'tutorial': 'fa fa-book',
        'guide': 'fa fa-compass',
        'tips': 'fa fa-lightbulb-o',
        'life': 'fa fa-heart',
        'personal': 'fa fa-user',
        'experience': 'fa fa-star',
        'thoughts': 'fa fa-comment',
        'reflection': 'fa fa-eye',
        'review': 'fa fa-search',
        'news': 'fa fa-newspaper-o',
        'update': 'fa fa-refresh',
        'release': 'fa fa-rocket',
        'announcement': 'fa fa-bullhorn',
        'software': 'fa fa-cogs',
        'engineering': 'fa fa-cogs',
        'software-engineering': 'fa fa-cogs',
        'management': 'fa fa-users',
        'team': 'fa fa-users',
        'leadership': 'fa fa-user-plus',
        'culture': 'fa fa-heart',
        'company': 'fa fa-building-o',
        'organization': 'fa fa-sitemap',
        'process': 'fa fa-cogs',
        'methodology': 'fa fa-tasks',
        'agile': 'fa fa-refresh',
        'scrum': 'fa fa-tasks',
        'kanban': 'fa fa-columns',
        'project': 'fa fa-folder',
        'open-source': 'fa fa-github',
        'community': 'fa fa-users',
        'meetup': 'fa fa-users',
        'conference': 'fa fa-microphone',
        'event': 'fa fa-calendar',
        'travel': 'fa fa-plane',
        'photo': 'fa fa-camera',
        'music': 'fa fa-music',
        'movie': 'fa fa-film',
        'game': 'fa fa-gamepad',
        'sport': 'fa fa-futbol-o',
        'food': 'fa fa-cutlery',
        'health': 'fa fa-heartbeat',
        'fitness': 'fa fa-heart',
        'design': 'fa fa-paint-brush',
        'ui': 'fa fa-paint-brush',
        'ux': 'fa fa-mouse-pointer',
        'creative': 'fa fa-lightbulb-o',
        'inspiration': 'fa fa-lightbulb-o',
        'default': 'fa fa-tag'
      }
      
      // 将分类值转换为小写进行匹配
      const lowerValue = categoryValue.toLowerCase()
      
      // 查找匹配的图标，支持部分匹配
      for (const [key, icon] of Object.entries(iconMap)) {
        if (lowerValue.includes(key) || key.includes(lowerValue)) {
          return icon
        }
      }
      
      // 如果没有找到匹配的，返回默认图标
      return iconMap.default
    },

    // 加载particles.js脚本
    loadParticlesScript() {
      return new Promise((resolve, reject) => {
        // 检查是否已经加载
        if (window.particlesJS) {
          resolve()
          return
        }

        // 创建script标签
        const script = document.createElement('script')
        script.src = 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js'
        script.onload = () => {
          console.log('Particles.js CDN加载成功')
          resolve()
        }
        script.onerror = () => {
          console.error('Particles.js CDN加载失败')
          reject(new Error('Failed to load particles.js'))
        }
        
        document.head.appendChild(script)
      })
    },

    // 初始化particles.js bubble效果
    async initParticles() {
      // 只在非管理页面显示粒子背景
      if (this.isAdminRoute) {
        console.log('管理页面，跳过粒子背景初始化')
        return
      }

      try {
        console.log('开始初始化Particles.js bubble效果...')
        
        // 检查body元素
        if (!document.body) {
          console.error('document.body不存在')
          return
        }

        // 使用CDN方式加载particles.js
        if (!window.particlesJS) {
          await this.loadParticlesScript()
        }
        
        const particles = window.particlesJS
        
        // 创建particles容器
        const particlesContainer = document.createElement('div')
        particlesContainer.id = 'particles-js'
        particlesContainer.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          pointer-events: none;
        `
        document.body.appendChild(particlesContainer)

        // 初始化particles.js
        particles('particles-js', {
          particles: {
            number: {
              value: 20,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: '#0f3460'
            },
            shape: {
              type: 'polygon',
              stroke: {
                width: 0,
                color: '#000000'
              },
              polygon: {
                sides: 6
              }
            },
            opacity: {
              value: 0.8,
              random: true,
              anim: {
                enable: false,
                speed: 1,
                opacity_min: 0.3,
                sync: false
              }
            },
            size: {
              value: 50,
              random: true,
              anim: {
                enable: false,
                speed: 40,
                size_min: 8,
                sync: false
              }
            },
            line_linked: {
              enable: false,
              distance: 150,
              color: '#ffffff',
              opacity: 0.4,
              width: 1
            },
            move: {
              enable: true,
              speed: 10,
              direction: 'none',
              random: false,
              straight: false,
              out_mode: 'out',
              bounce: false,
              attract: {
                enable: false,
                rotateX: 600,
                rotateY: 1200
              }
            }
          },
          interactivity: {
            detect_on: 'canvas',
            events: {
              onhover: {
                enable: true,
                mode: 'bubble'
              },
              onclick: {
                enable: true,
                mode: 'push'
              },
              resize: true
            },
            modes: {
              grab: {
                distance: 400,
                line_linked: {
                  opacity: 1
                }
              },
              bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
              },
              repulse: {
                distance: 200,
                duration: 0.4
              },
              push: {
                particles_nb: 4
              },
              remove: {
                particles_nb: 2
              }
            }
          },
          retina_detect: true
        })

        console.log('Particles.js bubble效果初始化成功')
        
      } catch (error) {
        console.error('Particles.js初始化失败:', error)
      }
    },

    // 处理路由变化
    handleRouteChange(to, from) {
      const toIsAdmin = to.path.startsWith('/admin')
      const fromIsAdmin = from.path.startsWith('/admin')

      console.log('路由变化:', { from: from.path, to: to.path, fromIsAdmin, toIsAdmin })

      // 如果从管理页面切换到普通页面，需要初始化粒子背景
      if (fromIsAdmin && !toIsAdmin) {
        console.log('从管理页面切换到普通页面，初始化粒子背景')
        this.$nextTick(() => {
          setTimeout(() => {
            this.initParticles()
          }, 200)
        })
      }
      // 如果从普通页面切换到管理页面，需要销毁粒子背景
      else if (!fromIsAdmin && toIsAdmin) {
        console.log('从普通页面切换到管理页面，销毁粒子背景')
        this.destroyParticles()
      }
    },

    // 销毁粒子效果
    destroyParticles() {
      try {
        const particlesContainer = document.getElementById('particles-js')
        if (particlesContainer) {
          particlesContainer.remove()
          console.log('Particles.js已销毁')
        }
        
        // 清理CDN脚本
        const particlesScript = document.querySelector('script[src*="particles.js"]')
        if (particlesScript) {
          particlesScript.remove()
        }
      } catch (error) {
        console.error('销毁Particles.js失败:', error)
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body样式已在index.css中定义，这里只保留App特有的样式 */

/* 背景渐变动画 - 移动到全局样式 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* Particles.js 样式 */
#particles-js {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 确保内容层级 */
#app {
  position: relative;
  z-index: 10;
}

.navbar {
  position: relative;
  z-index: 20;
}

.main-content {
  position: relative;
  z-index: 10;
}

.footer {
  position: relative;
  z-index: 10;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background: rgba(26, 26, 46, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  padding: 0.5rem 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(92, 225, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-bottom: 2px solid;
  border-image: var(--gradient-rainbow) 1;
  position: relative;
  transition: all 0.3s ease;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  background: transparent !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.mobile-menu-btn i {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.2rem;
  filter: drop-shadow(0 0 8px rgba(92, 225, 255, 0.5));
}

.mobile-menu-btn:hover {
  background: transparent !important;
  transform: scale(1.1);
}

.mobile-menu-btn:hover i {
  filter: drop-shadow(0 0 12px rgba(92, 225, 255, 0.8));
}

/* 桌面端导航默认显示 */
.desktop-nav {
  display: flex;
}

.navbar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-rainbow);
  filter: blur(15px);
  opacity: 0.6;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.5;
    filter: blur(15px);
  }
  50% {
    opacity: 0.8;
    filter: blur(10px);
  }
}

.nav-brand h2 {
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: filter var(--transition-normal);
}

.nav-brand h2:hover {
  filter: drop-shadow(0 0 12px rgba(92, 225, 255, 0.6));
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-rainbow);
  transition: all var(--transition-normal);
  transform: translateX(-50%);
}

.nav-link:hover::before {
  width: 80%;
}

.nav-link:hover {
  background: linear-gradient(135deg, rgba(92, 225, 255, 0.15) 0%, rgba(125, 82, 244, 0.15) 100%);
  color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(92, 225, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.nav-link.router-link-active {
  background: var(--gradient-rainbow);
  color: var(--text-black);
  font-weight: 700;
  box-shadow: var(--shadow-glow-rainbow);
  animation: navPulse 2s ease-in-out infinite;
}

@keyframes navPulse {
  0%, 100% { box-shadow: var(--shadow-glow-blue); }
  50% { box-shadow: var(--shadow-glow-rainbow); }
}

.main-content {
  flex: 1;
  margin: 0 auto;
  width: 100%;
  min-height: calc(100vh - 64px);
}

.main-content.admin-mode {
  min-height: 100vh;
}

/* 移动端抽屉样式 */
.mobile-drawer :deep(.el-drawer) {
  background: linear-gradient(135deg, #424549 0%, #2f3136 100%) !important;
}

.mobile-drawer :deep(.el-drawer)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #424549 0%, #2f3136 100%);
  z-index: -1;
}

.mobile-drawer :deep(.el-drawer__header) {
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative;
}



.mobile-drawer :deep(.el-drawer__close-btn) {
  color: var(--text-white) !important;
  font-size: 1.5rem !important;
}

.drawer-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(92, 225, 255, 0.5);
}

.mobile-drawer :deep(.el-drawer__body) {
  padding: 0 !important;
  background: transparent !important;
}

/* 自定义移动端菜单样式 */
.custom-mobile-menu {
  padding: 0.5rem;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  margin: 0.25rem 0;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
  transition: all var(--transition-normal);
  cursor: pointer;
  position: relative;
}

.menu-item i {
  margin-right: 0.75rem;
  font-size: 1.1rem;
  min-width: 20px;
}

.menu-item .arrow {
  margin-left: auto;
  margin-right: 0;
  font-size: 0.9rem;
  transition: transform var(--transition-normal);
}

.menu-item .arrow.open {
  transform: rotate(180deg);
}

.menu-item:hover {
  background: rgba(92, 225, 255, 0.2);
  box-shadow: 0 2px 8px rgba(92, 225, 255, 0.3);
  transform: translateX(3px);
}

.menu-item.router-link-active {
  background: rgba(92, 225, 255, 0.3);
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(92, 225, 255, 0.4);
}

.menu-item.router-link-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-rainbow);
  border-radius: 3px 0 0 3px;
}

.menu-group {
  margin: 0.25rem 0;
}

.sub-menu {
  margin: 0.5rem 0 0.5rem 1.5rem;
  padding: 0.5rem 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sub-menu-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  margin: 0.1rem 0.5rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.1);
  transition: all var(--transition-normal);
}

.sub-menu-item i {
  margin-right: 0.75rem;
  font-size: 0.95rem;
  min-width: 18px;
}

.sub-menu-item:hover {
  background: rgba(92, 225, 255, 0.2);
  box-shadow: 0 2px 8px rgba(92, 225, 255, 0.2);
  transform: translateX(3px);
}

.sub-menu-item.router-link-active {
  background: rgba(92, 225, 255, 0.3);
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    padding: 1rem;
  }
  
  .nav-brand h2 {
    font-size: 1.2rem;
  }
  
  /* 隐藏桌面端导航 */
  .desktop-nav {
    display: none !important;
  }
  
  /* 显示移动端菜单按钮 */
  .mobile-menu-btn {
    display: inline-flex;
  }
}

/* 下拉菜单样式 */
.nav-dropdown {
  position: relative;
  cursor: pointer;
}

.nav-dropdown .nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.nav-dropdown .nav-link.active {
  background: var(--gradient-rainbow);
  color: var(--text-black);
  font-weight: 700;
  box-shadow: var(--shadow-glow-rainbow);
}

.nav-dropdown .nav-link i {
  font-size: 0.8rem;
  transition: transform var(--transition-normal);
}

.nav-dropdown:hover .nav-link i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  background: rgba(26, 26, 46, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(92, 225, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  z-index: 1000;
  border: 1px solid rgba(92, 225, 255, 0.3);
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  margin-top: 0.8rem;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(26, 26, 46, 0.85);
  filter: blur(1px);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-normal);
  border-bottom: 1px solid rgba(92, 225, 255, 0.1);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.dropdown-item:hover {
  background: linear-gradient(135deg, rgba(92, 225, 255, 0.2) 0%, rgba(125, 82, 244, 0.2) 100%);
  color: var(--color-primary-light);
  padding-left: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dropdown-item.router-link-active {
  background: var(--gradient-rainbow);
  color: var(--text-black);
  font-weight: 600;
}

.dropdown-item i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

/* 页脚样式 */
.footer {
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  margin-top: var(--spacing-xl);
  border-top: 2px solid;
  border-image: var(--gradient-rainbow) 1;
  box-shadow: 
    0 -8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(92, 225, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  transition: all 0.3s ease;
}

.footer::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-rainbow);
  filter: blur(15px);
  opacity: 0.6;
  animation: pulse-glow 3s ease-in-out infinite;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.footer-section {
  text-align: center;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.footer-section h4 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-md);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}

.footer-section p {
  color: #bdc3c7;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}

.social-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: rgba(79, 193, 255, 0.2);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all var(--transition-normal);
  color: var(--color-primary-light);
}

.social-link i {
  font-size: 1.2rem;
}

.social-link:hover {
  background: var(--gradient-rainbow);
  color: var(--text-white);
  transform: translateY(-3px) rotate(5deg) scale(1.1);
  box-shadow: var(--shadow-glow-rainbow);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #bdc3c7;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  position: relative;
}

.footer-links a:hover {
  color: var(--color-primary-light);
  background: linear-gradient(135deg, rgba(92, 225, 255, 0.1) 0%, rgba(125, 82, 244, 0.1) 100%);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(92, 225, 255, 0.2);
}

.contact-info {
  flex: 1;
}

.contact-info p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info p i {
  margin-right: 0.5rem;
  width: 1rem;
  text-align: center;
}

.footer-bottom {
  padding: 1.5rem 2rem;
  position: relative;
  z-index: 1;
}

.footer-bottom-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  color: #bdc3c7;
  margin: 0;
  font-size: 0.9rem;
}

.footer-bottom-links {
  display: flex;
  gap: 2rem;
}

.footer-bottom-links a {
  color: #bdc3c7;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.footer-bottom-links a:hover {
  color: var(--color-primary-light);
  background: linear-gradient(135deg, rgba(92, 225, 255, 0.1) 0%, rgba(125, 82, 244, 0.1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(92, 225, 255, 0.2);
}

/* 移动端页脚样式 */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
    gap: 1rem;
  }
  
  .footer-section {
    min-height: auto;
    margin-bottom: 1rem;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .social-links {
    justify-content: center;
  }
  
  .contact-info p {
    font-size: 0.85rem;
  }
}
</style>
